<!doctype html>
<html lang="en">
	<head>
        <title>Home</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


        <!-- Main CSS --> 
        <link rel="stylesheet" href="css/style.css">

        <!-- Font Awesome -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
  
    <body>

         <!-- Main navigation -->
        <div id="sidebar">
                      
            <div class="navbar-expand-md navbar-dark"> 
            
                <header class="d-none d-md-block">
                    <h1><span>my</span>website</h1>
                </header>
                
                
                <!-- Mobile menu toggle and header -->
                <div class="mobile-header-controls">
                    <a class="navbar-brand d-md-none d-lg-none d-xl-none" href="#"><span>my</span>website</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SidebarContent" aria-controls="SidebarContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
         
                <div id="SidebarContent" class="collapse flex-column navbar-collapse">
 
                        
                    
                    <!-- Main navigation items -->
                    <nav class="navbar navbar-dark">
                        <div id="mainNavbar">
                            <ul class="flex-column mr-auto">
                                <li class="nav-item">
                                        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                                </li>

                                <li class="nav-item active dropdown">
                                            <a class="nav-link dropdown-toggle" href="#MenuDropdown" data-toggle="collapse" aria-controls="MenuDropdown" aria-expanded="false">Examples &amp; Pages</a>
                                            <ul id="MenuDropdown" class="sub-navbar collapse flex-column">
                                                <li class="nav-item"><a class="nav-link" href="examples.html">Style Examples</a></li>
                                                <li class="nav-item"><a class="nav-link" href="three-column.html">Three Column</a></li>
                                                <li class="nav-item"><a class="nav-link" href="one-column.html">One column / no sidebar</a></li>
                                                <li class="nav-item"><a class="nav-link"  href="text.html">Text / left sidebar</a></li>
                                            </ul>
                                </li>


                                <li class="nav-item">
                                        <a class="nav-link" href="#">Services</a>
                                </li>

                                <li class="nav-item">
                                        <a class="nav-link" href="#">Products</a>
                                </li>

                                <li class="nav-item">
                                        <a class="nav-link" href="#">Contact</a>
                                </li>
                            </ul>
                        </div>   
                    </nav>
                
                
                
                    <!-- Sidebar search form -->
                    <form class="form-inline sidebar-search-form my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="text" size="10"  placeholder="Search" aria-label="Search">
                        <button class="btn my-2 my-sm-0" type="submit">Search</button>
                    </form>
          
                    <!-- Social icons -->
                    <p class="sidebar-social-icons social-icons">
                        <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                        <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                        <a href="#"><i class="fa fa-youtube fa-2x"></i></a>
                        <a href="#"><i class="fa fa-instagram fa-2x"></i></a>
                    </p>
                
                </div>
            </div> 
        </div>
    
        
        <div id="content">
            <div id="content-wrapper">

                <!-- Main content area -->
                <main class="container-fluid">
                    <div class="row">

                        <!-- Left sidebar -->
                         <aside class="col-md-3">
                            <div class="sidebar-box">
                                <h4>Categories</h4>
                                <div class="list-group list-group-root">
                                    <a class="list-group-item" href="index.html">Home Page</a>
                                    <a class="list-group-item" href="examples.html">Style Examples</a>
                                    <div class="list-group">
                                        <a class="list-group-item active" href="three-column.html">Three Column</a>
                                        <a class="list-group-item" href="one-column.html">One column / no sidebar</a>
                                        <a class="list-group-item" href="text.html">Text / left sidebar</a>	
                                    </div>
                                    <a class="list-group-item" href="three-column.html">Three column layout example</a>
                                    <a class="list-group-item" href="#">Sed aliquam libero ut velit bibendum</a>
                                    <a class="list-group-item" href="#">Maecenas condimentum velit vitae</a>
                                </div>
                            </div>

                            <div class="sidebar-box sidebar-box-bg">
                                <h4>About us</h4>
                                <p>Aenean nec massa a tortor auctor sodales sed a dolor. Duis vitae lorem sem. Proin at velit vel arcu pretium luctus. <a href="#" class="readmore">Read More &raquo;</a></p>    
                            </div>

                            <div class="sidebar-box">
                                <h4>Search site</h4>
                                <form class="form-inline my-2 my-lg-0">
                                    <input class="form-control mr-sm-2" type="text"  placeholder="Search" aria-label="Search">
                                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                                </form>
                            </div>

                            <div class="sidebar-box">
                                <h4>Helpful Links</h4>
                                <ul>
                                    <li><a href="#" title="premium templates">Premium HTML web templates from $10</a></li>
                                    <li><a href="#" title="web hosting">Cheap web hosting from Dreamhost</a></li>
                                    <li><a href="#" title="Tux Themes">Premium WordPress themes</a></li>
                                </ul>
                            </div>
                        </aside> 

                        <!-- Main content -->
                        <div class="col-md-6">
                            <article>
                                <h2 class="article-title">Introduction to overflow</h2>

                                <p class="article-meta">Posted on <time datetime="2017-05-14">14 May</time> by <a href="#" rel="author">Joe Bloggs</a></p>

                                <p>Welcome to overflow, a free CSS3 &amp; HTML5 responsive web template from <a href="#" title="ZyPOP">ZyPOP</a>. This template is completely <strong>free</strong> to use permitting a link remains back to  <a href="#" title="ZyPOP">zyPop</a>.</p>

                                <p> Should you wish to use this template unbranded you can buy a template license from our website for 8.00 GBP, this will allow you remove all branding related to our site, for more information about this see below.</p>	

                                <p>This template has been tested in:</p>

                                <ul>
                                    <li>Firefox</li>
                                    <li>IE / Edge</li>
                                    <li>Chrome</li>
                                    <li>Safari</li>
                                    <li>iOS / Android</li>
                                </ul>

                                <a href="#" class="btn btn-primary">Read more</a>
                                <a href="#" class="btn btn-secondary">Comments</a>

                            </article>

                            <article>

                                <h2 class="article-title">Buy unbranded</h2>
                                <p class="article-meta">Posted on <time datetime="2017-05-14">14 May</time> by <a href="#" rel="author">Joe Bloggs</a></p>

                                <p>Purchasing a template license for 8.00 GBP (at time of writing around 10 USD) gives you the right to remove any branding including links, logos and source tags relating to ZyPOP. As well as waiving the attribution requirement, your payment will also help us provide continued support for users as well as creating new web templates. Find out more about how to buy at the licensing page on our website which can be accessed at <a href="#licensing" title="template license">#licensing</a></p>

                                <h3>Lorem lipsum</h3>

                                <p>Morbi fermentum condimentum felis, commodo vestibulum sem mattis sed. Aliquam magna ante, mollis vitae tincidunt in, malesuada vitae turpis. Sed aliquam libero ut velit bibendum consectetur. Quisque sagittis, est in laoreet semper, enim dui consequat felis, faucibus ornare urna velit nec leo. Maecenas condimentum velit vitae est lobortis fermentum. In tristique sem vitae metus ornare luctus tempus nisl volutpat. Integer et est id nisi tempus pharetra sagittis et libero.</p>

                                <a href="#" class="btn btn-primary">Read more</a>
                                <a href="#" class="btn btn-secondary">Comments</a>
                            </article>


                            <!-- Example pagination Bootstrap component -->
                            <nav>
                                <ul class="pagination">
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                                <span class="sr-only">Previous</span>
                                            </a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </li>
                                </ul>
                            </nav>
                        </div>


                        <!-- Right Sidebar -->
                        <aside class="col-md-3">
                            <div class="sidebar-box">
                                <h4>Categories</h4>
                                <div class="list-group list-group-root">
                                    <a class="list-group-item" href="index.html">Home Page</a>
                                    <a class="list-group-item" href="examples.html">Style Examples</a>
                                    <div class="list-group">
                                        <a class="list-group-item active" href="three-column.html">Three Column</a>
                                        <a class="list-group-item" href="one-column.html">One column / no sidebar</a>
                                        <a class="list-group-item" href="text.html">Text / left sidebar</a>	
                                    </div>
                                    <a class="list-group-item" href="three-column.html">Three column layout example</a>
                                    <a class="list-group-item" href="#">Sed aliquam libero ut velit bibendum</a>
                                    <a class="list-group-item" href="#">Maecenas condimentum velit vitae</a>
                                </div>
                            </div>

                            <div class="sidebar-box sidebar-box-bg">
                                <h4>About us</h4>
                                <p>Aenean nec massa a tortor auctor sodales sed a dolor. Duis vitae lorem sem. Proin at velit vel arcu pretium luctus. <a href="#" class="readmore">Read More &raquo;</a></p>    
                            </div>

                            <div class="sidebar-box">
                                <h4>Search site</h4>
                                <form class="form-inline my-2 my-lg-0">
                                    <input class="form-control mr-sm-2" type="text"  placeholder="Search" aria-label="Search">
                                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                                </form>
                            </div>

                            <div class="sidebar-box">
                                <h4>Helpful Links</h4>
                                <ul>
                                    <li><a href="#" title="premium templates">Premium HTML web templates from $10</a></li>
                                    <li><a href="#" title="web hosting">Cheap web hosting from Dreamhost</a></li>
                                    <li><a href="#" title="Tux Themes">Premium WordPress themes</a></li>
                                </ul>
                            </div>
                        </aside> 


                    </div> 
                </main>


                <!-- Footer -->
                <div class="container-fluid footer-container">
                    <footer class="footer">
                        <div class="footer-lists">
                            <div class="row">
                                <div class="col-sm">
                                    <ul>
                                        <li><h4>Proin accumsan</h4></li>
                                        <li><a href="#">Rutrum nulla a ultrices</a></li>
                                        <li><a href="#">Blandit elementum</a></li>
                                        <li><a href="#">Proin placerat accumsan</a></li>
                                        <li><a href="#">Morbi hendrerit libero </a></li>
                                        <li><a href="#">Curabitur sit amet tellus</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm">
                                    <ul>
                                        <li><h4>Condimentum</h4></li>
                                        <li><a href="#">Curabitur sit amet tellus</a></li>
                                        <li><a href="#">Morbi hendrerit libero </a></li>
                                        <li><a href="#">Proin placerat accumsan</a></li>
                                        <li><a href="#">Rutrum nulla a ultrices</a></li>
                                        <li><a href="#">Cras dictum</a></li>
                                    </ul>
                                </div>   
                                <div class="col-sm">
                                    <ul>
                                        <li><h4>Suspendisse</h4></li>
                                        <li><a href="#">Morbi hendrerit libero </a></li>
                                        <li><a href="#">Proin placerat accumsan</a></li>
                                        <li><a href="#">Rutrum nulla a ultrices</a></li>
                                        <li><a href="#">Curabitur sit amet tellus</a></li>
                                        <li><a href="#">Donec in ligula nisl.</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm">
                                    <h4>Suspendisse</h4>
                                    <p>Integer mattis blandit turpis, quis rutrum est. Maecenas quis arcu vel felis lobortis iaculis fringilla at ligula. Nunc dignissim porttitor dolor eget porta.</p>

                                    <p class="social-icons">
                                        <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                                        <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                                        <a href="#"><i class="fa fa-youtube fa-2x"></i></a>
                                        <a href="#"><i class="fa fa-instagram fa-2x"></i></a>
                                    </p>
                                </div>
                            </div>
                        </div>



                        <div class="footer-bottom">
                                <p class="text-center">Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
</p>
                                <p class="text-center"><a href="#">Back to top</a></p>
                        </div>

                    </footer>
                </div>
            </div>
        </div>

        <!-- Bootcamp JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="js/jquery-3.2.1.slim.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

    </body>
</html>